@import "./vxe-table-vars.scss";
@import "vxe-table/styles/variable.scss";
@import "./vxe-table-base.scss";

.vxe-table--render-default {
  user-select: text;

  .vxe-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .col--seq {
    background-color: $vxe-table-header-background-color;
    color: $vxe-table-header-font-color;
    .vxe-cell {
      padding-left: 0.25rem;
      padding-right: 0.25rem;

      transition: all 0.2s;
    }
  }
  // 鼠标移动到表格行的时候，行号放大显示
  .vxe-body--row {
    // .col--seq {
    // //修正样式
    //   background-image: linear-gradient($vxe-table-header-background-color, $vxe-table-header-background-color), linear-gradient(#e8eaec, #e8eaec);
    // }
    &.row--current {
      // 选中行时，非鼠标在check 之上，并且不是选中状态时候的样式
      .vxe-cell--checkbox:not(:hover):not(.is--checked) {
        .vxe-checkbox--icon {
          color: var(--theme-white);
        }
      }
      .vxe-cell--radio:not(:hover):not(.is--checked) {
        .vxe-radio--icon {
          color: var(--theme-white);
        }
      }
    }
    &.row--hover {
      .col--seq {
        .vxe-cell {
          transform: scale(1.8);
          text-shadow: 0 0 5px $vxe-table-header-background-color; // 一定程度解决放大超出后，文字重叠效果丑的问题
        }
      }

      .vxe-cell--checkbox:not(:hover):not(.is--checked) {
        .vxe-checkbox--icon {
          color: var(--theme-white);
        }
      }
      .vxe-cell--radio:not(:hover):not(.is--checked) {
        .vxe-radio--icon {
          color: var(--theme-white);
        }
      }
    }
  }
  // 表头的样式
  .vxe-table--header {
    .vxe-cell--checkbox {
      &:not(.is--disabled):hover,
      &.is--checked,
      &.is--indeterminate {
        .vxe-checkbox--icon {
          color: var(--theme-white);
          font-weight: initial;
        }
      }
    }
  }
  // 表格头部行高
  .vxe-header--column {
    line-height: 1.02;
    font-size: 90%;
    height: 48px; //! 修复vxe 浮动列中不包含 ellipsis 的设置时，高度缺失导致错位问题

    &:not(.col--ellipsis) {
      padding: 0 !important;
    }
  }

  // 表格内的 el-link 样式
  .el-link {
    font-size: 1em;
    margin: 0 0.25em;
    transition: all 0.1s;
    outline-offset: 10px;

    &:not(.is-disabled):hover {
      transform: scale(1.25);
      border-radius: 2px;
      outline: 3px solid rgba(0, 0, 0, 0.3);
      outline-offset: 3px;
    }
    &.is-underline:after {
      content: none;
    }
  }
  // 表头边线的样式控制
  &.border--full {
    .vxe-header--column {
      background-image: linear-gradient(var(--theme-white), var(--theme-white)), linear-gradient(var(--theme-white), var(--theme-white));
      // 表头最后一列的右侧线条的颜色
    }
    .vxe-header--row:first-of-type {
      //! 还存在BUG ，所以先只对第一行的最后一个单元格进行设置，
      //! 不过为了表格好看，可以给所有的表格加入一个空列自动占位，
      //! 这样既可以解决问题，又能达到想要的效果
      .vxe-header--column.col--last {
        background-image: none;
      }
    }
    .vxe-table--fixed-left-wrapper {
      .vxe-header--column.col--last {
        background-image: linear-gradient(var(--theme-white), var(--theme-white)), linear-gradient(var(--theme-white), var(--theme-white)) !important;
      }
    }
    .vxe-header--column.col--seq,
    .vxe-body--column.col--seq {
      background-image: none;
      border-right: 1px solid var(--theme-white);
      border-bottom: 1px solid var(--theme-white);
    }
  }
  &.border--default,
  &.border--inner {
    .vxe-body--column.col--seq {
      background-image: none;
      border-bottom: 1px solid var(--theme-white);
    }
  }
  &.border--default,
  &.border--full,
  &.border--outer,
  &.border--inner {
    .vxe-table--header-wrapper .vxe-header--row:last-child .vxe-header--gutter {
      border-bottom: 3px solid var(--theme-danger);
    }
  }
  .vxe-table--header-wrapper .vxe-table--header-border-line {
    // border-bottom: 1px solid var(--theme-white);
    border-bottom: 3px solid var(--theme-danger);
    right: 0;
  }

  &.size--small {
    .vxe-header--column {
      height: 40px; //! 修复vxe 浮动列中不包含 ellipsis 的设置时，高度缺失导致错位问题
      &.col--group {
        height: 30px;
      }
    }

    .vxe-header--row + .vxe-header--row .vxe-header--column {
      height: 30px;
    }
  }
}

.vxe-table--render-default:not(.is--scroll-x) .vxe-table--header-wrapper .vxe-table--header-border-line {
  width: auto !important;
}

.cell-p-0 .vxe-cell {
  padding: 0;
}
